<template>
  <div class="layout-row">
    <div class="layout-left">左</div>
    <div>中</div>
    <div class="layout-right">
      <el-table :data="modelMenuTree" row-key="id" border>
        <el-table-column prop="title" label="标题" sortable width="300" />
        <el-table-column prop="name" label="名称" sortable width="200" />
        <el-table-column prop="path" label="地址" sortable width="200" />
        <el-table-column align="center" label="操作" width="140" fixed="right">
          <template #default="{ row }">1</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .layout-row {
    display: flex;
    flex-direction: row; // 横向布局
    align-items: center; // 在横向布局中，使所有元素都垂直居中（上下居中）

    .layout-left {
      background-color: #c0f0f0;
      flex-shrink: 0; // 宽度不会缩小，即不让flex布局自动压缩这一列
      width: 200px;
    }

    .layout-right {
      overflow: auto; // 这个是关键，可以让el-table自适应宽度
    }
  }
</style>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import { SysMenuApi } from '/@/api/sysApi/SysMenuApi.ts'
  import { ElTable } from 'element-plus'
  import MenuType = SysMenuApi.MenuType

  const modelMenuTree = ref<MenuType[]>([]) // 菜单树

  const stateLoadingData = ref<boolean>(false) // 是否正在加载数据

  onMounted(async () => {
    await getMenuForest()
  })

  const getMenuForest = async () => {
    stateLoadingData.value = true
    try {
      const { data } = await SysMenuApi.forestAll()
      modelMenuTree.value = data.data
    } finally {
      stateLoadingData.value = false
    }
  }
</script>